import React from 'react'
import {Layout, Menu, Icon } from 'antd';
import { Link, Route, Switch } from 'react-router-dom'
import movieDetail from './movieDetail.jsx'
import movieList from './movielist.jsx'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
const { Content, Sider } = Layout;
export default class HomeContainer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      collapsed: false,
    }
  }

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
  
  componentDidMount(){
    NProgress.done(true)
  }
  render() {
    return <Layout style={{ height: '100%' }}>
      <Sider>
        <Menu style={{height:'100%'}} defaultSelectedKeys={[window.location.hash.split('/')[2] || 'in_theaters']} mode="inline">
          <Menu.Item key="in_theaters">
            <Icon type="pie-chart" />
            <Link style={{display:'inline'}} to='/movie/in_theaters/1'>正在热映</Link>
          </Menu.Item>
          <Menu.Item key="coming_soon">
            <Icon type="desktop" />
            <Link style={{display:'inline'}} to='/movie/coming_soon/1'>即将上线</Link>
          </Menu.Item>
          <Menu.Item key="top250">
            <Icon type="file" />
            <Link style={{display:'inline'}} to='/movie/top250/1'>top25</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Content style={{ margin: '0 16px' }}>
          <div style={{ padding: 10, background: '#fff', minHeight: 360 }}>
            <Switch>
              <Route exact path='/movie/detail/:id' component={movieDetail}></Route> 
              <Route exact path='/movie/:type/:page' component={movieList}></Route> 
            </Switch>
          </div>
        </Content>
      </Layout>
    </Layout>
  }
}